<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="UTF-8">
        <title>账号列表</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="/css/font.css">
        <link rel="stylesheet" href="/css/xadmin.css">
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
<div id="divvuehtml">
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">新闻管理</a>
                <a><cite>新闻列表</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text"  name="title" placeholder="请输入新闻标题" autocomplete="off"  class="layui-input">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                        <i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-body ">
                            <table class="layui-hide" id="test" lay-filter="test"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/html" id="toolbarDemo" v-if="userItem.type==1">
        <div class = "layui-btn-container" >
            <button class = "layui-btn layui-btn-sm" lay-event ="add"><i class="layui-icon layui-icon-add-circle-fine"></i>新增公告</button>
        </div >
    </script>

    <script type="text/html" id="barDemo" v-if="userItem.type==1">
         <a class="layui-btn layui-btn-xskai" lay-event="edit">编辑</a>
         <a class="layui-btn layui-btn-danger" lay-event="del">删除</a>
    </script>

    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
</div>
    <script th:inline="none">

        var ve = new Vue({
            el: '#divvuehtml',//绑定vue渲染范围
            data: {
                userItem:{}
            },
            created: function () {//vue在打开html前初始化创建函数
                this.getUser();  //获取用户信息
            },
            mounted: function () {//初始化html完成后在进行操作
                layui.use(['table','form','upload'],function() {
                    var table = layui.table;
                    var form = layui.form;

                    table.render({
                        id: 'listReload'
                        , elem: '#test'
                        , method: "get"
                        , url: '/api/admin/notice/list'
                        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        , page: true
                        , limit: 10
                        , limits: [10, 20, 30, 40, 50, 60, 70, 80, 90, 300]
                        , toolbar: '#toolbarDemo'
                        , parseData: function (res) { //res 即为原始返回的数据
                            return {
                                "code": res.msgcode, //解析接口状态
                                "msg": res.data == null ? "无数据展示" : res.msg, //解析提示文本
                                "count": res.data == null ? 0 : res.data.total, //解析数据长度
                                "data": res.data == null ? null : res.data.records //解析数据列表
                            };
                        }, request: {
                            pageName: 'page' //页码的参数名称，默认：page
                            , limitName: 'rows' //每页数据量的参数名，默认：limit
                        }, cols: [[
                            {title: '序号', align: 'center', type: "numbers"},
                            {title: '新闻标题', field: 'title', align: 'center'},
                            {title: '新闻内容', field: 'content', align: 'center'},
                            {title: '操作', toolbar: '#barDemo', align: 'center',width:"20%"}
                        ]]
                    });

                    //监听提交
                    form.on('submit(sreach)', function(data){
                        //上述方法等价于
                        table.reload('listReload', {
                            where: { //设定异步数据接口的额外参数，任意设
                                title: data.field.title
                            },page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        }); //只重载数据
                        return false;
                    });

                    //监听头工具栏事件
                    table.on('toolbar(test)', function(obj){
                        var checkStatus = table.checkStatus(obj.config.id);
                        switch(obj.event){
                            case 'add'://新增用户
                                xadmin.open('新增', '/api/admin/notice/add');
                                break;
                            case 'excel'://导入
                                break;
                        };
                    });

                    //监听行工具事件
                    table.on('tool(test)', function(obj){
                        var data = obj.data;
                        if(obj.event === 'edit'){
                            xadmin.open('修改','/api/admin/notice/edit?id='+data.id);
                        } else if(obj.event === 'del'){
                            layer.confirm('确定要删除选中的账号吗？',{
                                btn: ['确定', '取消']
                            }, function () {
                                $.ajax({
                                    url: "/api/admin/notice/deleteId",
                                    type: "post",
                                    data: {'id':data.id},
                                    dataType : "json",
                                    success: function (data) {
                                        if (data.success) {
                                            layer.alert(data.msg, {
                                                icon : 6
                                            }, function() {
                                                location.reload();
                                            });
                                        } else {
                                            layer.alert(data.msg, {
                                                icon : 2
                                            });
                                        }
                                    },error: function (XmlHttpRequest, textStatus, errorThrown) {
                                        layer.msg('error!', {icon: 2, time: 2000});
                                    }
                                });
                            })
                        }
                    });
                })
            },
            methods: {//调用函数
                addTab: function (text,href) {
                    xadmin.add_tab(text,href)
                },getUser: function(){
                    $.get("/api/author/get",{},function(data){
                        if(data.success){
                            ve.userItem = data.data;
                        }else{
                            layer.alert("登录信息已过期，请重新登录", {
                                icon : 5
                            }, function() {
                                location.href="/login.html";
                            });
                        }
                    },"json")
                }
            },updated: function () {
                layui.use('element', function(){
                    var element = layui.element;
                    element.render();
                });
            }
        });


    </script>

</html>
